<template>
  <view class="product-list" :class="`cols-${cols}`">
    <view 
      v-for="(item, index) in products" 
      :key="index"
      class="product-item"
      @click="handleItemClick(item)"
    >
      <product-card :product="item" />
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import ProductCard from './ProductCard.vue'

const props = defineProps({
  products: {
    type: Array,
    default: () => []
  },
  cols: {
    type: Number,
    default: 2
  }
})

const emits = defineEmits(['item-click'])

const handleItemClick = (product) => {
  emits('item-click', product)
}
</script>

<style lang="scss">
@import "@/uni.scss";
.product-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 20rpx;
  
  &.cols-1 {
    .product-item {
      width: 100%;
      margin-bottom: 20rpx;
    }
  }
  
  &.cols-2 {
    .product-item {
      width: calc(50% - 10rpx);
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      
      &:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
}
</style>